<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .web {
            padding: 50px;
        }

        .plan,
        .done {
            width: 500px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .planNum,
        .doneNum {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid black;
            position: relative;
            background-color: orange;
        }

        i{
            font-style: normal;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        .planBox,
        .doneBox {
            width: 500px;
            display: flex;
            align-items: center;
            margin: 10px 0;
        }

        .planBox{
            background-color: yellow;
        }

        .doneBox{
            background-color: red;
        }

        span{
            margin: 0 15px 0 5px;
        }
        
    </style>
</head>

<body>
    <div id="app">
        <div class="web">
            <input @input="getValue" v-model.trim="planValue" type="text">
            <button @click="add">添加</button>
            <div class="plan">
                <h1>待进行</h1>
                <div class="planNum"><i>{{planList.length}}</i></div>
            </div>
            <template v-for="(item,index) in planList">
                <div :key="index" class="planBox">
                    <input type="checkbox" :value="item" v-model="done">
                    <span>{{item}}</span>
                    <button @click="delPlan(index)">删除</button>
                </div>
            </template>

            <div class="done">
                <h1>已完成</h1>
                <div class="doneNum"><i>{{done.length}}</i></div>
            </div>

            <template v-for="(item,index) in done">
                <div class="doneBox">
                    <input type="checkbox" :value="item" v-model="done">
                    <span>{{item}}</span>
                    <button @click="delDone(index)">删除</button>
                </div>
            </template>

        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                planValue: "",
                planList: [],
                done:[],
            },
            methods: {
                getValue() {
                    this.planValue = event.target.value;
                },
                add() {
                    if(this.planValue){
                        this.planList.push(this.planValue);
                        this.planValue = "";
                        this.planNum = this.planNum + 1;
                    }
                },
                delPlan(index){
                    this.planList.splice(index,1)
                },
                delDone(index){
                    this.done.splice(index,1)
                }
            }
        });
    </script>
</body>

</html>